<template>
	<view class="box">
		<view class="head">
			<image src="../../static/img/detail01.png" mode="" class="head-bg"></image>
			<view class="head-con flex">
				<image :src="info.picUrl" mode="" class="logo"></image>
				<view class="head-right flex1">
					<view class="store-name line-clamp-one">{{info.name}}</view>
					<view class="store-address flex flai">
						<image src="../../static/img/ding01.png" mode=""></image>
						<text class="line-clamp-one flex1">{{info.marketName}}{{info.storeLocation}}</text>
					</view>
					<view class="update-time flex flai">
						<image src="../../static/img/update.png" mode=""></image>
						<text>{{info.addTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="store-search">
			<view style="height: 24rpx;border-radius:60rpx 60rpx 0 0;"></view>
			<view class="search-box flex flai flex1">
				<image src="../../static/img/search.png" mode="" class="search-icon"></image>
				<input type="text" value="" confirm-type="search" @confirm="search" v-model="searchCon" class="flex1"
				 placeholder="搜索当前商家商品" />
				<image src="../../static/img/close01.png" @click="clickInput" v-if="searchCon.length>0" mode="" class="clear-input"></image>
			</view>
			<view class="product-info">
				<productList :loading="loading" :msg="msg" @loadMore="loadMore"@refresh="refresh" @update="update" @upPrice="upPrice" :list="searchList" :productListHeight="productListHeight"></productList>
			</view>

		</view>
	</view>
</template>

<script>
	import productList from '../components/productList/productList.vue'
	import API from '../../api/index.js'
	export default {
		components: {
			productList
		},
		data() {
			return {
				searchList: [],
				searchCon: '',
				info: {},
				id: null,
				productListHeight: 300,
				sort: 'update_time',
				order: 'desc',
				page:1,
				size:10,
				loading:false,
				msg:''
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.id = opt.id
			this.getDetail()
			this.getMechearList()
			var _this = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					console.log(res.windowHeight); // 屏幕的宽度 

					let info = uni.createSelectorQuery().select(".head");
					info.boundingClientRect(function(data) { //data - 各种参数
						console.log(data.height) // 获取元素宽度
						_this.productListHeight = res.windowHeight-data.height-30

						console.log('高度')
					}).exec()

				}
			});
		},
		methods: {
			// 清空搜索框
			clickInput() {
				console.log('点我')
				this.searchList = []
				this.searchCon = ''
				this.getMechearList()
				
			},

			getDetail() {
				API.indexHome.mechartDetail({
					id: this.id
				}).then(res => {
					if (res.errno == 0) {
						this.info = res.data
					}
				})
			},
			loadMore() {
				this.page = this.page + 1
				this.getMechearList()
			},
			refresh () {
				this.page =  1
				this.searchList = []
				this.loading = false
				this.getMechearList()
			},
			update(val) {
				console.log(val)
				this.sort = 'update_time'
				this.order = val
				this.searchList = []
				this.page =  1
				this.getMechearList()
			},
			upPrice(val) {
				console.log(val)
				this.order = val
				this.searchList = []
				this.sort = 'retail_price'
				this.page =  1
				this.getMechearList()
			},
			search () {
				this.searchList = []
				this.page =  1
				this.getMechearList()
			},
			getMechearList() {
				var data = {
					merchantId: this.id,
					keyword: this.searchCon,
					order: this.order,
					sort: this.sort,
					page:this.page,
					size:this.size
				}
				API.indexHome.getNowMechartList(data).then(res => {
					if (res.errno == 0) {
						var data = res.data.items
						if (data.length>0&&data.length<10) {
							this.msg ='主人我是有底线的哟~~'
							this.loading = true
						} 
						if (data.length==10) {
							this.msg ='上拉加载更多'
							this.loading = true
						}
						this.searchList = [...this.searchList,...data]
					}
				})
			}
		}
	}
</script>

<style>
	@import url("./style.css");
</style>
